<template>
	<view class="container">
		<!-- <text>登录</text> -->
		<!--f1: 用户输入组 -->
		<view class="input-group">
			<input type="text" placeholder="用户名/手机号/邮箱" value="" />
			<uni-icons type="person"></uni-icons>
		</view>
		<!-- f2:密码输入组 -->
		<view class="input-group">
			<input type="text" :password="hidePwd" placeholder="登录密码" value="" />
			<uni-icons @click="hidePwd=!hidePwd" :type="hidePwd?'eye-slash':'eye'"></uni-icons>
			<text class="separator">|</text>
			<navigator url="/pages/findPwd/findPwd">忘记密码</navigator>
			<!-- TODO:忘记密码页面 -->
		</view>
	</view>
</template>

<script>
	export default {
		name:"XzLogin",
		data() {
			return {
				hidePwd:false,  //是否隐藏密码
			};
		}
	}
</script>

<style lang="scss">
	.container {
		padding: $uni-spacing-col-lg*3 $uni-spacing-row-lg*3;
		.input-group {
			display: flex;
			border-bottom: $uni-border-width $uni-border-style $uni-border-color;
			padding: $uni-spacing-col-base 0;
			.separator {
				margin: 0 $uni-spacing-row-sm;
			}
		}
	}
</style>